<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="./css/userCard.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script src="./utils/request.js"></script>
    <script>
        // 请求过程传递的数据：请求报文 【 请求报文头，请求报文体 】
        // 响应过程传递的数据：响应报文 【 响应报文头，响应报文体 】
        /*
        1、无请求体和无响应体的请求
            (options,head) ==> 测试请求

        2、无请求体和有响应体的请求
            (get) ==> 参数方式单一
                         ==> 这类请求只能使用 URL地址参数 (get参数) (Query String Parameters 参数)

        3、有请求体和有响应体的请求 ==> 参数方式丰富
            (post,put,patch,delete,……)
        */

        // Query String Parameters 参数 ==> 不依存于请求体(请求报文)
        /*
            参数构成：
                + 在请求地址后依据 http 协议规范以 ? 关键字分割请求地址和参数数据
                + http协议中?分割的参数以关键字 & = 进行描述(属性的作用和取值)
                + 参数组成: 参数名=参数值&参数名=参数值&……
                + 参数大小存在限制，且发送的地址只能使用ASSII编码规则

            参数从实际开发角度出发分为两类：
                + 无效参数 ：后端服务器并不需要该参数从事业务操作
                + 有效参数 : 参数参与到后端服务运行过程中
        */
        function sendQueryString(){
            let username = document.querySelector("#username").value;
            let password = document.querySelector("#password").value;

            axios({
                // url:"http://127.0.0.1:3000/api/query?username=admin&password=1236",
                url:`http://127.0.0.1:3000/api/query?username=${username}&password=${password}`
            }).then(function(data){
                console.log("后端服务器响应结果:",data)
            })
        }
        function sendQueryString2(){
            axios({
                url:"http://127.0.0.1:3000/api/query",
                // `params` 是与请求一起发送的 URL 参数
                // 必须是一个简单对象或 URLSearchParams 对象
                params: {
                    username:document.querySelector("#username").value,
                    password:document.querySelector("#password").value
                }
            }).then(function(data){
                console.log("后端服务器响应结果:",data)
            })
        }

        // 手动实现简单对象的 参数格式转换（axios自动完成操作）
        function stringifyQuery(obj={}){
            let temp = "?";
            for (let key in obj) {
               temp += key +"="+ obj[key] +"&"
            }
            return temp.replace(/&$/,"");
        }
        console.log( stringifyQuery({ a:1,b:2 }) )

        // URLSearchParams 构造函数的 参数字符串转对象
        let urlQuery = "?username=tom&password=123456";
        let queryObj = new URLSearchParams(urlQuery); // 自动去除?
        console.log(queryObj.get("username"))
        console.log(queryObj.get("password"))

        // URLSearchParams 构造函数的 对象定义 转参数字符串
        let user = {
            name:"tom",
            age:23
        }
        console.log( JSON.stringify(user) )
        let queryObj2 = new URLSearchParams();
        queryObj2.append("username","jack");
        queryObj2.append("password","123456");
        console.log( queryObj2.toString() )  // 该方法调用后，不会自动增加?

    </script>
</head>
<body>
    <label>
        登录名: <input type="text" id="username">
    </label>
    <br>
    <label>
        密码: <input type="password" id="password">
    </label>
    <br>
    <input type="button" value="sendQueryString" onclick="sendQueryString()">
    <input type="button" value="sendQueryString" onclick="sendQueryString2()">

</body>
</html>